<template>
	<div class="user-wrap">
		<header-view1 :headTitle = 'headTitle'></header-view1>
		<div class="user-photo">
			<img src="../assets/images/user.png">
			<span>{{ userData.mobile }}</span>
		</div>
		<ul class="user-list">
			<li><router-link to="/userRead">浏览记录<i></i></router-link></li>
			<li><router-link to="/userFocus">关注记录<i></i></router-link></li>
			<li><a><span>客服电话</span><span class="phone">{{ telephone }}</span></a></li>
			<!-- <li></li> -->
		</ul>
		<div class="user-out" @click='quit'>退出登录</div>
         <footer class="footer-body">
            <img src="../assets/images/slogan6.png" style="display: block;width: 200px;height: auto;margin: 0 auto 20px;" alt="">
            <p class="copyright">Copyright @ 2018 qalex.com All Right Reserved</p>
            <p class="copyright">版权所有：广州市昊信联行物业管理有限公司</p>
            <p class="copyright">ICP经营许可证：粤B2-20080214</p>
            <p class="copyright">粤ICP备06127393号-1</p>
        </footer>
        <alert :message='message' v-if="openMessage" @closeBtn="closeMessage"></alert>
	</div>	
</template>

<script>
	import alert from '../components/public/alert'
	export default{
		name:'user',
		components:{alert},
		data(){
			return{
				headTitle:'个人中心',
				userData:{},
				openMessage:false,
				message:'',
				telephone:''
			}
		},
		created(){
			this.getData()
			this.getMobile()
		},
		methods:{
			getData(){
				var that = this
				this.$get('/api/user',{token:localStorage.getItem('token')}).then(res=>{
					// console.log(res)
					
						// console.log(res)
						this.userData = res
					
					
				}).catch(res=>{
				})
			},
			getMobile(){
				this.$get('/api/website').then(res=>{
					// console.log(res)
					this.telephone = res.data.telephone
				})
			},
			quit(){
				this.$post('/api/logout',{token:localStorage.getItem('token')}).then(res=>{
					if(res.code == 0){
						localStorage.removeItem('token')
						this.openMessage = true
						this.message = '退出成功'
					}
				})
			},
			closeMessage(){
				this.openMessage = false
				this.$router.push('/')
			}
		}
	}
</script>

<style scoped>
	.user-photo{
		padding: 22px 30px;
		background-color: #e62129;
		height: 58px;
	}
	.user-photo img{
		display: inline-block;
		width: 58px;
		height: 58px;
		vertical-align: middle;
	}
	.user-photo span{
		vertical-align: middle;
		font-size: 16px;
		color: #fff;
		padding-left: 5px;
	}
	.user-list{
		background-color: #fff;
		padding: 0 22px;
		margin: 10px 0;
	}
	.user-list li{
		height: 62px;
		border-bottom: 1px solid #e5e6f0;
		background-color: #fff;
	}
	.user-list li:nth-child(3){
		border-bottom: none;
	}
	.user-list li a{
		display: block;
		width: 100%;
		line-height: 62px;
		font-size: 16px;
		color: #333;
	}
	.user-list li a span.phone{
		float: right;
		color: #8a8a8a;
	}
	.user-out{
		line-height: 62px;
		background-color: #fff;
		font-size: 16px;
		color: #333;
		text-align: center;
	}
	.footer-body{
		margin-top: 15px;
		background-color: #f5f5f5;
		border-top: none;
	}
	.user-list a i {
    float: right;
    width: 20px;
    height: 20px;
    position: relative;
    margin-top: -2px;
	}
	.user-list a i:before {
    position: absolute;
    top: 21px;
    right: auto;
    bottom: auto;
    left: 1px;
    z-index: 10;
    display: block;
    content: "";
    width: 10px;
    height: 10px;
    border-width: 2px 2px 0 0;
    border-style: solid;
    border-color: #ccc;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
	}
</style>